import { omit, noop } from "lodash";
import React, { useState, useEffect, useRef } from "react";
import { RendererPropTypes } from "@/visualizations/prop-types";
import useMemoWithDeepCompare from "@/lib/hooks/useMemoWithDeepCompare";

import useLoadGeoJson from "../hooks/useLoadGeoJson";
import initChoropleth from "./initChoropleth";
import { prepareData } from "./utils";
import "./renderer.less";

export default function Renderer({ data, options, onOptionsChange, onClickHandler }) {
  let mapType = options.mapType;
  if (mapType.indexOf("_all_") > 0) {
    let nameParam =  mapType.split("_all_")[1];
    let searchURL = window.location.search;
    if (searchURL.includes("_" + nameParam)) {
      if (searchURL.indexOf("_" + nameParam + "=") > 0) {
        searchURL = searchURL.substring(searchURL.indexOf("_" + nameParam + "="), searchURL.length);
      } else if (searchURL.indexOf("_" + nameParam + " ") > 0) {
        searchURL = searchURL.substring(searchURL.indexOf("_" + nameParam + " "), searchURL.length);
      }
      let urlParam = searchURL.split("&")[0].split("=")[1];
      if (!!urlParam) {
        options.mapType = mapType.replace("all_" + nameParam, urlParam);
      }
    }
  }

  let fileName = options.fileName;
  if (mapType === 'custom') {
    let searchURL = window.location.search;
    if (searchURL.includes("_adcode")) {
      if (searchURL.indexOf("_adcode=") > 0) {
        searchURL = searchURL.substring(searchURL.indexOf("_adcode="), searchURL.length);
      } else if (searchURL.indexOf("_adcode ") > 0) {
        searchURL = searchURL.substring(searchURL.indexOf("_adcode "), searchURL.length);
      }
      let urlParam = searchURL.split("&")[0].split("=")[1];
      if (!!urlParam) fileName = urlParam + ".geo.json";
    }
  }

  const [container, setContainer] = useState(null);
  const [geoJson] = useLoadGeoJson(options.mapType, fileName);
  const onBoundsChangeRef = useRef();
  onBoundsChangeRef.current = onOptionsChange ? bounds => onOptionsChange({ ...options, bounds }) : noop;

  const optionsWithoutBounds = useMemoWithDeepCompare(() => omit(options, ["bounds"]), [options]);
  const showPortal = window.location.search.includes("show_portal") && localStorage.getItem('colorstyle_mode');

  const [map, setMap] = useState(null);

  useEffect(() => {
    if (container) {
      const _map = initChoropleth(container, options, (...args) => onBoundsChangeRef.current(...args));
      setMap(_map);
      return () => {
        _map.destroy();
      };
    }
  }, [container]);

  useEffect(() => {
    if (map) {
      map.updateLayers(
        geoJson,
        prepareData(data.rows, optionsWithoutBounds.keyColumn, optionsWithoutBounds.valueColumn),
        options, // detect changes for all options except bounds, but pass them all!
        onClickHandler
      );
    }
  }, [map, geoJson, data.rows, optionsWithoutBounds, onClickHandler]); // eslint-disable-line react-hooks/exhaustive-deps

  // This may come only from editor
  useEffect(() => {
    if (map) {
      map.updateBounds(options.bounds);
    }
  }, [map, options, onOptionsChange]);

  return (
    <div className="map-visualization-container" 
      style={showPortal ? {background: "#00000000"} : {background: options.colors.background}} 
      ref={setContainer} 
    />
  );
}

Renderer.propTypes = RendererPropTypes;
